import React ,{
    PureComponent
} from 'react';

import {
    StyleSheet
} from 'react-native';

import {
    View
} from 'react-native-animatable';

interface Props {
    show:boolean,
    maskOpacity:number,
    onClosed:Function,
    onShown:Function
}

class Mask extends PureComponent<Props> {
    static defaultProps = {
        show:false,
        maskOpacity:.3,
        onShown:() => null,
        onClosed:() => null
    }

    _onAnimationEnd = () => {
        const {
            show,
            onShown,
            onClosed
        } = this.props;
        if(show) {
            onShown()
        }
        else {
            onClosed()
        }
    }

    get styles() {
        const {
            maskOpacity
        } = this.props;
        return [StyleSheet.absoluteFill,{
            backgroundColor:`rgba(0,0,0,${maskOpacity})`
        }]
    }

    render() {
        const {
            show
        } = this.props;
        return (
            <View
                duration={400}
                style={this.styles}
                animation={show ? `fadeIn`:`fadeOut`}
                onAnimationEnd={this._onAnimationEnd}
            />
        )
    }
}

export default Mask;

